<div
  class="job-item"
  [class.abortable]="job().state === JobState.Running && job().abortable"
  [class.interactive]="clickable()"
  [matTooltip]="job().state === JobState.Failed ? job().error : null"
  [matTooltipPosition]="'left'"
>
  <div class="job-item-body" (click)="clickable() && open()">
    <div class="description-line">
      <span class="job-description">
        {{ job().description ? job().description : job().method }}
      </span>
      @if (job().state === JobState.Running) {
        <small class="job-progress-percent">
          {{ job().progress.percent || 0 | number: '1.2-2' }}%
        </small>
      }
    </div>

    @if (job().state === JobState.Running) {
      <mat-progress-bar
        class="job-progress"
        [value]="job().progress.percent"
        [mode]="job().progress.percent ? 'determinate' : 'indeterminate'"
      ></mat-progress-bar>
    }

    <div>
      @switch (job().state) {
        @case (JobState.Running) {
          @if (job().progress.description) {
            <div class="job-progress-description">
              {{ job().progress.description }}
            </div>
          }
          @if (!job().progress.description) {
            <div class="job-time">
              {{ 'Started' | translate }}:
              <strong>
                {{ job().time_started?.$date ? (job().time_started.$date | formatDateTime) : '–' }}
              </strong>
            </div>
          }
        }
        @case (JobState.Waiting) {
          <div class="job-time">
            {{ 'Waiting' | translate }}:
            <strong>
              {{ job().time_started?.$date ? (job().time_started.$date | formatDateTime) : '–' }}
            </strong>
          </div>
        }
        @case (JobState.Failed) {
          <div class="job-time">
            {{ 'Stopped' | translate }}:
            <strong>
              @let timeFinished = job().time_finished?.$date;
              {{ timeFinished ? (timeFinished | formatDateTime) : '–' }}
            </strong>
          </div>
        }
      }
    </div>

    @if (job().credentials; as credentials) {
      <div>
        <div class="job-credentials">
          {{
          'Created by: {creationSource} ({creationType})' | translate: {
          creationSource: getCredentialsCreationSource(credentials),
          creationType: (credentials.type | mapValue: credentialTypeLabels | translate)
        }
        }}
      </div>
    </div>
  }
</div>

@if (job().state === JobState.Running && job().abortable) {
  <button
    class="job-button-abort"
    mat-icon-button
    type="button"
    [ixTest]="['abort', job().description, job().method]"
    [matTooltip]="'Abort' | translate"
    (click)="abort()"
  >
    <ix-icon name="mdi-stop-circle" class="job-icon-abort"></ix-icon>
  </button>
}

@if (job().state === JobState.Waiting) {
  <button
    mat-icon-button
    type="button"
    [ixTest]="['waiting', job().description, job().method]"
    [disabled]="true"
  >
    <ix-icon name="schedule" class="job-icon-waiting"></ix-icon>
  </button>
}

@if (job().state === JobState.Failed) {
  <button
    mat-icon-button
    type="button"
    [ixTest]="['failed', job().description, job().method]"
    [disabled]="true"
  >
    <ix-icon
      name="cancel"
      matTooltipPosition="left"
      class="job-icon-failed"
      [matTooltip]="job().error"
    ></ix-icon>
  </button>
}

@if (job().state === JobState.Success) {
  <button
    mat-icon-button
    type="button"
    [ixTest]="['success', job().description, job().method]"
    [disabled]="true"
  >
    <ix-icon name="mdi-check-circle" class="job-icon-success"></ix-icon>
  </button>
}
</div>
